import 'package:flutter/material.dart';
import '../constants.dart' show AppColors, Constants;
import 'wechat_page.dart';
import 'mail_list_page.dart';
import 'find_page.dart';
import 'person_page.dart';

enum ActionItems { GROUP_CHAT, ADD_FRIEND, QR_SCAN, PAYMENT, HELP }

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = new PageController();
  }

  _buildPopupMenuItem(int iconName, String title) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Icon(
              IconData(iconName, fontFamily: Constants.IconFontFamily),
              size: 22.0,
              color: Color(AppColors.AppBarPopupMenuColor),
            ),
            Container(
              width: 18.0,
            ),
            Text(
              title,
              style: TextStyle(color: Color(AppColors.AppBarPopupMenuColor)),
            ),
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _pages = [
      WechatPage(1),
      MailListPage(2),
      FindPage(3),
      PersonPage(4)
    ];

    return Scaffold(
      // 1、AppBar,这边使用了action,这边接收的是一个组件数组，那么就可用Google提供的IconButton
      appBar: AppBar(
        title: Text("微信"),
        centerTitle: false,
        elevation: 0.0,
        actions: <Widget>[
          // 搜索按钮
          IconButton(
            icon: Icon(
              IconData(0xe65e, fontFamily: Constants.IconFontFamily),
              size: 20.0,
            ),
            onPressed: () {
              print("点击了搜索");
            },
          ),
          // 添加按钮
          PopupMenuButton(
            icon: Icon(
              IconData(0xe658, fontFamily: Constants.IconFontFamily),
              size: 20.0,
            ),
            itemBuilder: (BuildContext context) {
              return <PopupMenuItem<ActionItems>>[
                PopupMenuItem(
                  child: _buildPopupMenuItem(0xe69e, "发起群聊"),
                  value: ActionItems.GROUP_CHAT,
                ),
                PopupMenuItem(
                  child: _buildPopupMenuItem(0xe638, "添加朋友"),
                  value: ActionItems.ADD_FRIEND,
                ),
                PopupMenuItem(
                  child: _buildPopupMenuItem(0xe61b, "扫一扫"),
                  value: ActionItems.QR_SCAN,
                ),
                PopupMenuItem(
                  child: _buildPopupMenuItem(0xe62a, "收付款"),
                  value: ActionItems.PAYMENT,
                ),
                PopupMenuItem(
                  child: _buildPopupMenuItem(0xe63d, "帮助和反馈"),
                  value: ActionItems.HELP,
                ),
              ];
            },
            onSelected: (ActionItems selected) {
              print('点击的是: $selected');
            },
          ),
          // 使用container来填充距离
          Container(
            width: 16.0,
          )
        ],
      ),

      // 2、底部导航栏，这边接收的是一个BottomNavigationBar这个组件
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: const Color(AppColors.TabIconActive),
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              title: Text('微信'),
              icon: new Icon(
                  IconData(0xe608, fontFamily: Constants.IconFontFamily)),
              activeIcon: new Icon(
                  IconData(0xe603, fontFamily: Constants.IconFontFamily)),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
              title: Text('通讯录'),
              icon: new Icon(
                IconData(0xe601, fontFamily: Constants.IconFontFamily),
              ),
              activeIcon: new Icon(
                  IconData(0xe656, fontFamily: Constants.IconFontFamily)),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
              title: Text('发现'),
              icon: new Icon(
                  IconData(0xe600, fontFamily: Constants.IconFontFamily)),
              activeIcon: new Icon(
                  IconData(0xe671, fontFamily: Constants.IconFontFamily)),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
              title: Text('我'),
              icon: new Icon(
                  IconData(0xe6c0, fontFamily: Constants.IconFontFamily)),
              activeIcon: new Icon(
                  IconData(0xe626, fontFamily: Constants.IconFontFamily)),
              backgroundColor: Colors.white)
        ],
        onTap: (int index) {
          print(index);
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      // 3、中间显示的内容
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return _pages[_currentIndex];
        },
        itemCount: _pages.length,
        controller: _pageController,
        onPageChanged: (int index) {
          print("onPageChanged: $index");
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
